<script setup lang="ts">
import { FormItem } from '@formily/element-plus';
import { Icon } from '@iconify/vue';
import { ElRadioButton, ElRadioGroup } from 'element-plus';
import { usePrefix } from '@season-designable/vue';
import { useField } from '@formily/vue';
import { DataField } from '@formily/core';

const props = defineProps(['value']);
const emit = defineEmits(['change']);

const field = useField<DataField>();
const prefix = usePrefix('display-style-setter');

const onChange = (e: any) => {
  emit('change', e);
};
</script>

<template>
  <FormItem.BaseItem :label="field.title" :class="prefix">
    <ElRadioGroup
      :class="prefix + '-radio'"
      :model-value="props.value"
      @change="onChange"
    >
      <ElRadioButton label="block">
        <Icon icon="mdi:crop-square" style="font-size: 24px" />
      </ElRadioButton>
      <ElRadioButton label="inline-block">
        <Icon
          icon="mdi:alphabetical"
          style="border-radius: 4px; font-size: 24px"
        />
      </ElRadioButton>
      <ElRadioButton label="inline">
        <Icon icon="mdi:alphabetical" style="font-size: 24px" />
      </ElRadioButton>
      <ElRadioButton label="flex">
        <Icon icon="mdi:border-outside" style="font-size: 24px" />
      </ElRadioButton>
    </ElRadioGroup>
  </FormItem.BaseItem>
</template>

<style lang="scss" scoped>
@import '../../../../styles.scss';
.dn-display-style-setter {
  &-radio {
    display: flex !important;
    width: 100%;

    :deep(.el-radio-button) {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 2;

      .el-radio-button__inner {
        width: 100%;
        padding: 3px 0 !important;
      }
    }

    // .#{$element-prefix}-radio-button-wrapper {
    //   flex-grow: 1;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   padding: 0;
    // }
  }
}
</style>
